<template>
	<view>
		<sunMenu></sunMenu>  
		<u-swiper :indicator="true" :circular="true" :list="list1" :height="swiperHeight" radius="0"
			imgMode="aspectFill" @click="handleSwiperClick"></u-swiper>
		<view class="search-card" style="user-select: text;">
			<!-- <view>
				<view style="margin-bottom: 24rpx;">活動類型</view>
				<SearchSelect type="multiple" :options="cityOptions" :modelValue.sync="selectedCities"
					placeholder="全部" @change="handleCityChange" />
			</view> -->
			<!-- <view>
				<view style="margin-bottom: 24rpx;">地區</view>
				<SearchSelect type="multiple" :options="areaOptions" :modelValue.sync="selectedAreas"
					placeholder="全部" @change="handleAreaChange" />
			</view> -->
			<!-- <view>
				<view style="margin-bottom: 24rpx;">公里数</view>
				<SearchSelect type="single" :options="kmOptions" :modelValue.sync="selectedKms" placeholder="全部"
					@change="handleKmChange" />
			</view> -->
			<view style="width: 46%;">
				<view style="margin-bottom: 24rpx;">報名狀態</view>
				<SearchSelect type="single" :options="statusOptions" :modelValue.sync="selectedStatus"
					placeholder="全部" @change="handleStatusChange" />
			</view>
			<view style="width: 46%;">
				<view style="margin-bottom: 24rpx;">年份</view>
				<SearchSelect type="single" :options="yearOptions" :modelValue.sync="selectedYears" placeholder="全部"
					@change="handleYearChange" />
			</view>
			<view style="width: 46%;">
				<view style="margin-bottom: 24rpx;">月份</view>
				<SearchSelect type="single" :options="monthOptions" :modelValue.sync="selectedMonth"
					placeholder="全部" @change="handleMonthChange" />
			</view>
			<view style="width: 46%;">
				<view style="margin-bottom: 24rpx;">關鍵字搜尋</view>
				<!-- <SearchSelect   
								:modelValue.sync="keywords" placeholder="請輸入關鍵字"  
				@change="handleKeywordsChange" /> -->

				<input class="search-input" type="text" v-model="keywords" placeholder="請輸入關鍵字" />


			</view>
		</view>
		<button class="register-btn" @tap="handleSearch">搜尋</button>
		<view style="text-align: center;margin-top: 24rpx;font-size: 24rpx;" @click="handleReset"
			class="reset-text">重置</view>
		<view class="section-title">
			<h1>活動賽事 / Event</h1>
		</view> 
		<view class="activity-grid"> 
			<view style="display: flex">
				<view>
					<button :class="{'view-btn': true, 'active': viewMode === 'image'}"
						@tap="viewMode = 'image'">
						<uni-icons type="image" size="22" style="margin-right: 8rpx;" />圖片檢視
					</button>
				</view>
				<view style="margin-left: 24rpx;">
					<button :class="{'view-btn': true, 'active': viewMode === 'list'}" @tap="viewMode = 'list'">
						<uni-icons type="list" size="22" style="margin-right: 8rpx;" />列表檢視
					</button>
				</view>
			</view>  
		</view> 
		<view class="activity-list">
			<view v-if="viewMode === 'image'" class="activity-grid">
				<view v-for="activity in activities" :key="activity.id" class="activity-card"
					style="margin-bottom: 24rpx;">
					<view class="activity-status" :class="{'status-closed': getRegistrationStatus(activity) === '報名截止', 'status-not-open': getRegistrationStatus(activity) === '未開放報名'}">
						{{getRegistrationStatus(activity)}}
					</view>
					<image :src="activity.titleImg" mode="aspectFill" />
					<view class="card-content">
						<view class="card-title">{{activity.title}}</view>
						<view class="card-info">
							<view class="info-item">
								<uni-icons type="calendar" size="14"></uni-icons>
								<text>{{activity.activeTime}}</text>
							</view>
							<view class="info-item">
								<uni-icons type="location" size="14"></uni-icons>
								<text>{{activity.address}}</text>
							</view>
							<view class="distance-tags">
								<text v-for="(distance, index) in activity.distances" :key="index"
									class="tag">{{distance}}</text>
							</view>
						</view>
						<button class="table-register-btn" :class="{'btn-disabled': getRegistrationStatus(activity) !== '報名中'}"
							@tap="handleRegister(activity)">
							{{getRegistrationStatus(activity) === '報名中' ? '我要報名' : getRegistrationStatus(activity)}}
						</button>
					</view>
				</view>
			</view>
			<view v-else class="activity-list-table">
				<view class="table-header">
					<view class="th date-cell">日期</view>
					<view class="th title-cell">活動名稱</view>
					<view class="th distance-cell">里程數</view>
					<view class="th address-cell">地點</view>
					<view class="th button-cell">報名</view>
				</view>
				<view v-for="activity in activities" :key="activity.id" class="table-row">
					<view class="td date-cell">{{activity.activeTime}}</view>
					<view class="td title-cell">
						<view class="activity-title">{{activity.title}}</view>
						<view v-if="getRegistrationStatus(activity) === '報名中'" class="status-tag">報名中</view>
						<view v-else class="status-tag" :class="{'status-closed': getRegistrationStatus(activity) === '報名截止', 'status-not-open': getRegistrationStatus(activity) === '未開放報名'}">{{getRegistrationStatus(activity)}}</view>
					</view>
					<view class="td distance-cell">
						<text v-for="(distance, index) in activity.distances" :key="index" class="tag">{{distance}}</text>
					</view>
					<view class="td address-cell">{{activity.address}}</view>
					<view class="td button-cell">
						<button class="table-register-btn" :class="{'btn-disabled': getRegistrationStatus(activity) !== '報名中'}" @tap="handleRegister(activity)">
							{{getRegistrationStatus(activity) === '報名中' ? '我要報名' : getRegistrationStatus(activity)}}
						</button>
					</view>
				</view>
			</view>
			<view style="height: 100rpx;"></view>
		</view>
		<view class="footer">
			<text class="footer-text">© 2025 夏璽玥網路有限公司 版權所有 XIA AKOYA INC. All Rights Reserved. 統一編號90370186</text>

		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import sunMenu from '../components/sun-menu/sun-menu.vue'
	import SearchSelect from '@/components/SearchSelect/SearchSelect.vue'
	import {
		getActiveList,
		getswiperList
	} from '@/api/api.js'
	export default {
		components: {
			sunMenu,
			SearchSelect
		},
		data() {
			return {
				list1: [],
				isPc: false,
				cityOptions: ['台北市', '新北市', '台中市', '高雄市', '台南市'],
				areaOptions: ['北區', '北區阿三大蘇打實打實啊实打实'],
				yearOptions: ['2024', '2025'],
				monthOptions: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
				kmOptions: ['5km', '10km'],
				statusOptions: ['全部', '未開放報名', '報名中', '報名截止'],
				selectedCities: [],
				selectedYears: [],
				selectedKms: [],
				selectedStatus: '全部',
				selectedAreas: [],
				selectedMonth: [],
				keywords: "",
				activities: [{
					id: 1,
					titleImg: 'https://images.unsplash.com/photo-1552674605-db6ffd4facb5',
					title: '線上路跑',
					activeTime: '2025年4月7日 (星期一)',
					address: '線上路跑，不限地點',
					distances: ['3K'],
					status: '0'
				}],
				viewMode: 'image'
			}
		},
		computed: {
			swiperHeight() {
				return this.isPc ? '530px' : '300rpx'
			},
			getRegistrationStatus() {
				return (activity) => {
					const now = new Date();
					const startTime = new Date(activity.startTime);
					const endTime = new Date(activity.endTime);
					
					if (now < startTime) {
						return '未開放報名';
					} else if (now >= startTime && now <= endTime) {
						return '報名中';
					} else {
						return '報名截止';
					}
				}
			},
			isRegistrationClosed() {
				return (activity) => {
					const status = this.getRegistrationStatus(activity);
					return status === '報名截止';
				}
			}
		},
		mounted() {
			// #ifdef H5
			this.isPc = document.documentElement.clientWidth >= 960
			window.addEventListener('resize', this.checkDevice)
			// #endif
		},
		beforeDestroy() {
			// #ifdef H5
			window.removeEventListener('resize', this.checkDevice)
			// #endif
		},
		onLoad() {
			this.getList()
			getswiperList().then(res => {
				this.list1 = res.data
			})
		},
		onShow() {
			uni.setStorageSync("activeId", '')
		},
		methods: {
			handleSwiperClick(index) { 
				const item = this.list1[index];
				uni.navigateTo({
					url: item.link
				});
			},
			getList() {
				getActiveList({
					status: '1'
				}).then(res => {
					this.activities = res.data.map(item => ({
						...item,
						distances: item.distances ? item.distances.split(',').map(d => `${d}km`) : []
					}))
				})
			},
			checkDevice() {
				this.isPc = document.documentElement.clientWidth >= 960
			},
			handleSearch() {
				// 如果选择了月份但没有选择年份，提示用户
				if (this.selectedMonth && this.selectedMonth.length && (!this.selectedYears || !this.selectedYears
						.length)) {
					uni.showToast({
						title: '請先選擇年份',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 构建搜索参数对象
				const searchParams = {
					status: '1'
				};

				// 添加公里数筛选条件
				if (this.selectedKms && this.selectedKms.length) {
					const km = this.selectedKms.replace('km', '');
					searchParams.distance = km;
				}

				if (this.selectedYears && this.selectedYears.length) {
					// 添加年月份筛选条件
					if (this.selectedMonth && this.selectedMonth.length) {
						// 格式化月份，确保是两位数
						const month = this.selectedMonth.padStart(2, '0');
						// 组合年月日 
						const lastDay = new Date(Number(this.selectedYears), Number(this.selectedMonth), 0).getDate();
						const strDate = `${this.selectedYears}-${month}-01 00:00:00`;
						const endDate = `${this.selectedYears}-${month}-${lastDay} 23:59:59`;
						searchParams.strDate = strDate
						searchParams.endDate = endDate
					} else {
						// 格式化月份，确保是两位数
						const month = this.selectedYears.padStart(2, '0');
						// 组合年月日
						const lastDay = new Date(Number(this.selectedYears), Number(this.selectedMonth), 0).getDate();
						const strDate = `${this.selectedYears}-01-01 00:00:00`;
						const endDate = `${this.selectedYears}-12-31 23:59:59`;
						searchParams.strDate = strDate
						searchParams.endDate = endDate
					}
				}
				// 添加关键字搜索
				if (this.keywords && this.keywords.trim().length) {
					searchParams.title = this.keywords.trim();
				}

				// 显示加载提示
				uni.showLoading({
					title: '搜索中...'
				});

				// 调用API获取符合条件的活动列表 
				getActiveList(searchParams).then(res => {
					let filteredActivities = res.data.map(item => ({
						...item,
						distances: item.distances ? item.distances.split(',').map(d => `${d}km`) : []
					}));

					// 前端筛选报名状态
					if (this.selectedStatus && this.selectedStatus !== '全部') {
						filteredActivities = filteredActivities.filter(activity => {
							const status = this.getRegistrationStatus(activity);
							return status === this.selectedStatus;
						});
					}

					this.activities = filteredActivities;

					uni.hideLoading();

					if (this.activities.length === 0) {
						uni.showToast({
							title: '没有找到符合条件的活动',
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(err => {
					console.error('搜索活动失败：', err);
					uni.hideLoading();
					uni.showToast({
						title: '搜索失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			handleCityChange(cities) {
				console.log('选择的城市：', cities)
			},
			handleYearChange(years) {
				console.log('选择的年份：', years)
			},
			handleKmChange(km) {
				console.log('选择的km：', km)
			},
			handleStatusChange(status) {
				console.log('选择的报名状态：', status);
				this.handleSearch();
			},
			handleAreaChange(area) {
				console.log('选择的area：', area)
			},
			handleMonthChange(month) {
				console.log('选择的month：', month)
			},
			handleKeywordsChange(value) {
				console.log('输入的关键字：', value)
			},
			handleRegister(activity) {
				if (activity.status === '報名截止') return
				// 处理报名逻辑
				uni.navigateTo({
					url: '/pages/activeDetail?id=' + activity.id + '&date=' + this.$u.timeFormat(activity
						.activeTime, 'yyyymmdd')
				})
			},
			handleReset() {
				// 重置所有选择项为空字符串或空数组
				this.selectedKms = '';
				this.selectedYears = '';
				this.selectedMonth = '';
				this.keywords = '';
				this.selectedStatus = '全部';
				// 显示重置成功提示
				this.getList()
				uni.showToast({
					title: '已重置',
					icon: 'success',
					duration: 1500
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	/* 搜片样式优化 */
	.search-card {
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		margin: 80rpx auto;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		justify-content: space-between;
	}

	.input-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.input-wrapper>view {
		flex: 1;
		min-width: 280rpx;
	}

	.search-button {
		min-width: 120rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 40rpx;
		background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		color: white;
		border-radius: 40rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(13, 197, 180, 0.3);
		transition: all 0.3s ease;
	}

	/* 活动卡片样式优化 */
	.activity-grid {
		width: 90%;
		margin: 0 auto 40rpx;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 30rpx;
	}

	.activity-card {
		position: relative;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.activity-card:hover {
		transform: translateY(-6rpx);
		box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.12);
	}

	.activity-status {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background: rgba(13, 197, 180, 0.9);
		color: white;
		padding: 8rpx 24rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 500;
		backdrop-filter: blur(4px);
		z-index: 1;
	}

	.activity-card image {
		width: 100%;
		height: 380rpx;
		object-fit: cover;
		transition: transform 0.3s ease;
	}

	.activity-card:hover image {
		transform: scale(1.03);
	}

	.card-content {
		padding: 32rpx;
	}

	.card-organizer {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 12rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
		line-height: 1.4;
		color: #333;
	}

	.card-info {
		margin-bottom: 24rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 12rpx;
		color: #666;
		font-size: 24rpx;
	}

	.distance-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
		margin: 16rpx 0;
	}

	.tag {
		background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		color: white;
		padding: 6rpx 20rpx;
		border-radius: 6rpx;
		font-size: 22rpx;
		font-weight: 500;
	}

	.register-btn {
		background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		color: white;
		border: none;
		border-radius: 40rpx;
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 20rpx;
		width: 90%;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 12rpx rgba(13, 197, 180, 0.2);
	}

	.register-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(13, 197, 180, 0.15);
	}

	.btn-disabled {
		background: linear-gradient(135deg, #999 0%, #888 100%);
		box-shadow: none;
		cursor: not-allowed;
	}

	.section-title {
		text-align: center;
		margin: 60px 0;
		position: relative;
	}

	.section-title::after {
		content: '';
		display: block;
		width: 160rpx;
		height: 4rpx;
		background: #333;
		margin: 20rpx auto 0;
	}

	.search-input {
		flex: 1;
		min-width: 60rpx;
		height: 56rpx;
		padding: 0 16rpx;
		box-sizing: border-box;
		border: 2rpx solid #dcdfe6;
		padding: 12rpx 16rpx;
		border-radius: 8rpx;
		min-height: 84rpx;
		line-height: 56rpx;
	}

	/* PC styles */
	@media screen and (min-width: 960px) {

		.search-card,
		.activity-grid {
			width: 1110px;
			max-width: 90%;
		}

		.input-wrapper {
			padding: 8rpx;
			gap: 40rpx;
		}

		.input-wrapper>view {
			flex: 0 1 300px;
		}

		.activity-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.search-card {
			margin: 90px auto;
		}

		.section-title {
			margin: 60px 0;
		}

		.section-title::after {
			margin: 20px auto 0;
			width: 100px;
		}
	}

	.reset-text {
		color: #666;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.reset-text:hover {
		color: #0DC5B4;
	}

	.reset-text:active {
		transform: scale(0.95);
	}

	.view-btn {
		background: #f5f5f5;
		border: none;
		border-radius: 8rpx;
		padding: 0rpx 22rpx;
		font-size: 26rpx;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s;
		width: 250rpx;
	}

	.view-btn.active {
		background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		color: #fff;
	}

	.activity-list-table {
		width: 1110px;
		max-width: 90%;
		margin: 0 auto;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.table-header {
		display: flex;
		background: #f8f8f8;
		padding: 24rpx 32rpx;
		border-bottom: 2rpx solid #eee;
	}

	.table-row {
		display: flex;
		padding: 32rpx;
		border-bottom: 2rpx solid #eee;
		align-items: center;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.table-row:hover {
		background: #fafafa;
	}

	.th, .td {
		padding: 0;
		line-height: 1.4;
	}

	.th {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.td {
		font-size: 28rpx;
		color: #333;
	}

	.date-cell {
		width: 18%;
		padding-right: 24rpx;
	}

	.title-cell {
		width: 32%;
		padding-right: 24rpx;
	}

	.distance-cell {
		width: 18%;
		padding-right: 24rpx;
		display: flex;
		gap: 8rpx;
		flex-wrap: wrap;
	}

	.address-cell {
		width: 20%;
		padding-right: 24rpx;
	}

	.button-cell {
		width: 12%;
		text-align: right;
	}

	.activity-title {
		font-weight: 500;
		color: #333;
		margin-bottom: 8rpx;
	}

	.status-tag {
		display: inline-block;
		background: rgba(13, 197, 180, 0.1);
		color: #0DC5B4;
		padding: 4rpx 16rpx;
		border-radius: 4rpx;
		font-size: 24rpx;
		margin-top: 8rpx;
	}

	.table-register-btn {
		background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		color: white;
		border: none;
		border-radius: 40rpx;
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 20rpx;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 12rpx rgba(13, 197, 180, 0.2);
		min-width: 140rpx;
		width: 100%;
		display: block;
	}

	.table-register-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(13, 197, 180, 0.15);
	}

	.table-register-btn.btn-disabled {
		background: linear-gradient(135deg, #999 0%, #888 100%);
		box-shadow: none;
		cursor: not-allowed;
	}

	.table-row .tag {
		padding: 8rpx 20rpx;
		font-size: 24rpx;
		border-radius: 6rpx;
		white-space: nowrap;
	}

	/* 移动端适配 */
	@media screen and (max-width: 768px) {
		.activity-list-table {
			width: 100%;
			max-width: 100%;
			margin: 0;
			background: #f5f5f5;
			padding: 0 40rpx;  
		}

		.table-header {
			display: none;
		}

		.table-row {
			border-radius: 16rpx;
			display: block;
			padding: 32rpx 24rpx;
			position: relative;
			background: #fff;
			margin-bottom: 20rpx;
			border: none;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		}

		.td {
			display: block;
			width: 100% !important;
			padding: 0;
			text-align: left;
		}

		.date-cell {
			display: flex;
			align-items: center;
			color: #666;
			font-size: 24rpx;
			margin-bottom: 16rpx;
		}

		.date-cell::before {
			content: '';
			display: inline-block;
			width: 8rpx;
			height: 8rpx;
			background: #00C8B3;
			border-radius: 50%;
			margin-right: 12rpx;
		}

		.title-cell {
			margin-bottom: 20rpx;
		}

		.activity-title {
			font-size: 32rpx;
			font-weight: 600;
			line-height: 1.4;
			margin-bottom: 12rpx;
			color: #333;
		}

		.status-tag {
			display: inline-block;
			margin: 0;
			padding: 6rpx 16rpx;
			font-size: 22rpx;
			border-radius: 6rpx;
			background: rgba(0, 200, 179, 0.1);
			color: #00C8B3;
		}

		.distance-cell {
			display: flex;
			flex-wrap: wrap;
			gap: 12rpx;
			margin-bottom: 20rpx;
		}

		.table-row .tag {
			margin: 0;
			padding: 8rpx 24rpx;
			font-size: 24rpx;
			background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
			border-radius: 8rpx;
		}

		.address-cell {
			display: flex;
			align-items: center;
			color: #666;
			font-size: 26rpx;
			margin-bottom: 32rpx;
			line-height: 1.4;
		}

		.address-cell::before {
			content: '';
			display: inline-block;
			width: 24rpx;
			height: 24rpx;
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") center/contain no-repeat;
			margin-right: 12rpx;
			flex-shrink: 0;
		}

		.button-cell {
			text-align: center;
		}

		// .table-row .table-register-btn {
		// 	width: 100%;
		// 	height: 88rpx;
		// 	line-height: 88rpx;
		// 	padding: 0;
		// 	font-size: 28rpx;
		// 	font-weight: 500;
		// 	border-radius: 12rpx;
		// 	background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		// 	box-shadow: 0 4rpx 12rpx rgba(13, 197, 180, 0.2);
		// 	transition: all 0.3s ease;
		// }

		// .table-row .table-register-btn.btn-disabled {
		// 	background: #999;
		// 	box-shadow: none;
		// }

		.table-row:last-child {
			margin-bottom: 0;
		}
	}

	/* PC端样式保持不变 */
	@media screen and (min-width: 769px) {
		.activity-list-table {
			width: 1110px;
			max-width: 90%;
		}

		.table-header {
			display: flex;
		}

		.table-row {
			display: flex;
		}

		.td {
			width: auto;
		}

		.date-cell {
			width: 18%;
		}

		.title-cell {
			width: 32%;
		}

		.distance-cell {
			width: 18%;
		}

		.address-cell {
			width: 20%;
		}

		.button-cell {
			width: 12%;
		}

		.register-btn {
			width: 58%;
		} 
	}

	.status-closed {
		background: rgba(153, 153, 153, 0.9) !important;
	}

	.status-not-open {
		background: rgba(255, 152, 0, 0.9) !important;
	}

	.status-tag.status-closed {
		background: rgba(153, 153, 153, 0.1) !important;
		color: #999 !important;
	}

	.status-tag.status-not-open {
		background: rgba(255, 152, 0, 0.1) !important;
		color: #FF9800 !important;
	}
</style>